import React from 'react';
import { connect, Dispatch } from 'umi';

import { Form, Input, Modal } from 'antd';

import { ConnectState, IResponse } from '@/models/connect';

interface RenameModelProps {
  visible: boolean;
  onCancel: () => void;
  onCallBack?: (res: IResponse,name:string) => void;
  dispatch: Dispatch;
  groupId: number
}

const GroupRenameModel: React.FC<RenameModelProps> = (props) => {
  const { visible, groupId, onCancel, dispatch, onCallBack } = props;
  const [form] = Form.useForm();
  const { validateFields } = form;

  // 存储分组名称
  const establish = () => {
    validateFields().then(async (values) => {
      dispatch({
        type: 'board/saveRenameGroup',
        payload: {
          id: groupId,
          name: values.name,
        },
        callback: (res: IResponse) => {
          onCallBack && onCallBack(res,values.name);
        },
      });
    });
  };

  return (
    <Modal
      title='重命名'
      destroyOnClose
      visible={visible}
      onOk={establish}
      onCancel={() => {
        onCancel();
      }}
    >
      <Form name='form' form={form}>
        <Form.Item name='name' label='分组名称' rules={[{ required: true }]}>
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default connect(({}: ConnectState) => ({}))(GroupRenameModel);
